<template>
	<view>
		<view class="docTop">
			<view class="topbox">
				<view class="ty1">
					<view class="">{{good.goods_name}}</view>
					<view class="u-f u-f-ac"><text class="simtp">ID:{{good.goods_id}}</text><text class="simtp">{{good.type}}</text></view>
				</view>
				<view class="ty2">
					<view class="">+{{good.shop_price}}</view>
					<!-- <view class="">+3.98</view> -->
				</view>
			</view>
			<view class="smsmsg u-f u-f-ac u-f-jsb">
				
			</view>
			<view class="kiss">
				<view class="ki1 u-f u-f-ac u-f-l">
					<view class="avatarg u-f u-f-ac u-f-ajc">
						<image :src="user.head_pic" mode="aspectFill"></image>
					</view>
					<view class="avatarnr">
						<view class="avataruser u-f-ajc">
							<text>{{nickname || ''}} </text> <text style="margin-left: 5px;"> UID：{{userid || ''}}</text>
						</view>
						<view class="avaxxt">
							<text class="mas1">{{users.isrz==2?'实名认证':'实名认证'}}</text>
						</view>
					</view>
				</view>
				<view class="ki2 conts" v-if="users.istel==2" @tap="tel">
					<image src="../../static/icon/mjxx.svg" mode="aspectFill"></image>
					<view class="">联系商家</view>
				</view>
			</view>
		</view>
		<view class="ysmain">
			<view class="bclis">
				任务步骤
			</view>
			<block v-for="(value,key) in fu" :key="key">
			<view class="lets">
				<view class="nums">{{key+1}}</view>
				<view class="">
					<view class="letitle" >步骤{{key+1}} (说明)</view>
					<view class="letp">{{value.name}}</view>
				</view>
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-if="value.imgurl"  v-for="(image, index) in value.imgurl" :key="index">
						<view class="uni-uploader__file">
							<image class="mrimg" :src="image" :data-src="image" @tap="previewImage1"  mode="aspectFill" ></image>
						</view>
						</block>
					 <block v-if="value.imgtj"  >
						<view class="uni-uploader__file" v-for="(image1, index1) in value.imgtj" :key="index1">
							<view v-if="bjs==1" @tap="delimg(key,index1)" class="icon iconfont iconshanchu"></view>
							<image class="uni-uploader__img" src="image" :src="image1" :data-src="image1" @tap="previewImage1" mode="aspectFill"></image>
							</view>
					 </block>
						<view  class="uni-uploader__input-box">上传截图<view class="uni-uploader__input" @tap="chooseImage(key)"></view></view>
					</view>
				</view>
			</view>
			</block>
		</view>
		<view class="ysmain hids">
			<view class="bclis">
				备注：<text class="bpdi">{{TaskOrder.sbz}}</text>
			</view>
		</view>	
		<view v-if="TaskOrder.order_status==0" class="bntbox" @tap="bntbox">提交审核</view>
		<view v-if="TaskOrder.order_status==1" class="bntbox">等待审核</view>
		<view v-if="TaskOrder.stype==3" class="bntbox">已经通过 佣金已反到钱包</view>
		<view v-if="TaskOrder.stype==4" class="bntbox">拒审</view>
		<view v-if="TaskOrder.stype==5" class="bntbox">投诉</view>
	</view>
</template>

<script>
	var sourceType = [['camera'], ['album'], ['camera', 'album']];
	var sizeType = [['compressed'], ['original'], ['compressed', 'original']];
	import {mapState} from 'vuex';//请求数据 mapState
	var yzyTime = require('../../common/util.js');
	export default {
		props: {
			focus: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				imageList: [],
				sourceType: ['拍照', '相册', '拍照或相册'],
				countIndex:1,
				count: [1],
				image11:'https://wx.gzyz1.com/public/uploads/20200826114430_13804.jpg',
				imgs:true,
				
				text: "",
				imgUrl:this.config.imgUrl,
				isnone: "none",
				ysData: [],
				newItems:[],
				comment:[],
				options:[],
				urls:'',
				couse:'0',
				isgzs:'0',
				data:[],
				buz:[],
				names:'',
				nickname:'',
				userid:'',
				users:[],
				lname:'领取任务',
				islname:0,
				TaskOrder:[],
				bjs:0,
				good:[],
				user:[],
				fu:[],
				imglist:[]
				}
		},
		onLoad(options){
			this.options=options;
				this.ongrzlTap(this.options.oid);
		},
		onShow(){
		
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])//第一个值判断是否登录，第二个是用登录成功用户基本信息
		},
		methods: {
			delimg(key,index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.fu[key].imgtj.splice(index, 1);
						}
					}
				});
			},
			async bntbox(){
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				let data = {};
				data.id=this.TaskOrder.order_id
				if(!this.fu[0].imgtj){
					uni.showModal({
						title: '提示',
						content: '请提交任务步骤截图',
						showCancel: false,
						success: res => {
							return;
						}
					});
					return;
				}
				data.fu = JSON.stringify(this.fu)
				data.token = uni.getStorageSync("userInfo").token;
				data.uid = uni.getStorageSync("userInfo").id;
				var that=this;
				uni.request({
					//url: this.config.webUrl+'/api/order/index',
					url: that.$serverUrl + '/index.php/Mobile/index/rwtj',
					data: data,
					success: data => {
					console.log(data)
				    that.TaskOrder.order_status=1;
				    uni.showToast({
				    	title: '提交成功',
				    	duration: 2000
				    });
					},
					fail: (data, code) => {
					}
				});
				/**let [err,res] = await this.$http.get('/api/mytask/rwtj',data);
				if (!this.$http.errorCheck(err,res)) return;
				if(res.data.code==1){
					this.$api.msg(res.data.msg);
					this.lname=res.data.msg;
					this.ongrzlTap(this.options.oid);
				}else{
					this.$api.msg(res.data.msg);
				}**/
				
			},
			tel: function(e){
				uni.makePhoneCall({
				    phoneNumber: this.users.mobile //仅为示例
				});
			},
			previewImage: function(e){
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				});
			},
			previewImage1: function(e){
				console.log(e)
				var current = e.target.dataset.src;
				uni.previewImage({
					current: 1,
					urls: [current]
				});
			},
			async ongrzlTap(oid){
				let data = {id:oid};
				if(uni.getStorageSync("userInfo").id>0){
					data.uid = uni.getStorageSync("userInfo").id;
				}
				data.rwid = this.options.id;
				var that=this;
				uni.request({
					//url: this.config.webUrl+'/api/order/index',
					url: that.$serverUrl + '/index.php/Mobile/index/tjinfo',
					data: data,
					success: data => {
			        that.good=data.data.good;
					that.user=data.data.user;
					if(data.data.user.mobile){
						that.nickname=data.data.user.mobile
						that.userid=data.data.user.user_id
					}
					that.fu=data.data.fu;
					console.log(that.fu);
					console.log('任务详情')
					that.TaskOrder=data.data.TaskOrder;
					},
					fail: (data, code) => {
					}
				});
				//&filter={"status":"normal"}&op={"status":"="}
				/**let [err,res] = await this.$http.get('/api/index/tjinfo',data);
				if (!this.$http.errorCheck(err,res)) return;
				if(res.data){
					this.data=res.data
					this.islname=res.data.islname
					this.buz=res.data.buz
					if(res.data.TaskOrder){
						this.TaskOrder=res.data.TaskOrder
						if(res.data.TaskOrder.stype==1 || res.data.TaskOrder.stype==4){
							this.bjs=1
						}
					}
					if(res.data.users.nickname){
						this.nickname=res.data.users.nickname
						this.userid=res.data.users.id
					}
					if(res.data.users){
						this.users=res.data.users
					}
				}else{
					this.$api.msg(res.data.msg);
				}**/
			},
			chooseImage:  function(key) {
				var that=this;
				uni.chooseImage({
					count: 1, //默认9
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					success: res => {
						uni.showLoading({ mask: true,title: '正在上传...' });  
						uni.uploadFile({
							//url: this.config.webUrl+'/api/user/upload?token='+uni.getStorageSync("userInfo").token, //仅为示例，非真实的接口地址
							url: that.$serverUrl+'/index.php/Mobile/index/upload?id='+uni.getStorageSync("userInfo").id,
							filePath: res.tempFilePaths[0],
							name: "file",
							dataType:"json",
							formData: {},
							success: (uploadFileRes) => {
								console.log(that.fu[key])
								uni.hideLoading();
								var dataarr=JSON.parse(uploadFileRes.data);
								if(dataarr.status==200){
								console.log(that.imglist)
								console.log('任务列表')
								//that.fu[key].imgtj = that.fu[key].imgtj.concat([dataarr.url]);
								that.fu[key]["imgtj"].push(dataarr.url)
							//	that.imglist.push(dataarr.url)
								console.log(that.fu[key])
								console.log('任务列表1')
								}else{
									uni.showToast({
										title:dataarr.msg
									})
								}
							},
							complete(res) {
								uni.hideLoading();
							
							}
						}); 
					}
				});
			},

		}
	}
</script>

<style>
	/* page {
		background: url(http://www.scgyly.com/images/ybg.svg);
		background-position: top center;
		background-repeat: no-repeat;
		background-size: 100%;
	} */
	.hids{
		padding-bottom: 200upx!important;
	}
	.names{
		width: 92%;
		margin: 0 auto;
		padding: 0upx 10upx;
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		color: #333;
		box-sizing: border-box;
		background: #f3f3f3;
		border-radius: 6upx;
	}
	.uni-uploader__input-box{
		line-height:50upx;
		text-align: center;
	}
	.bpdi{
		font-size: 28upx;
		color: #999;
		padding-left: 20upx;
		box-sizing: border-box;
		font-weight: normal;
	}
	.bntbox{
		width: 100%;
		height: 40px;
		line-height: 40px;
		background: #FFB400;
		color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		text-align: center;
		font-size: 32upx;
		font-weight: 600;
	}
	.bntbox1{
		width: 100%;
		height: 40px;
		line-height: 40px;
		background: #ccc;
		color: #999;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		text-align: center;
		font-size: 32upx;
		font-weight: 600;
	}
	.bntbox:active{
		background: #FFAC45;
		color: #fff;
	}
	.ysmain{
		padding-bottom: 40upx;
	}
	.uni-uploader__file {
		position: relative;
		margin: 4px!important;
	}
	.iconshanchu {
		z-index: 1;
		position: absolute;
		right: -10upx;
		top: -10upx;
		width: 46upx;
		height: 46upx;
		border-radius: 50%;
		line-height: 40upx;
		text-align: center;
		background: #ff1919;
		font-size: 24upx;
		color: #fff;
		border: 2px solid #fafafa;
	}
	.wdmstitleimg{
		padding: 8upx 0upx;
			padding-left: 50upx;
			font-size: 32upx;
			font-weight: 500;
			position: relative;
			border-bottom: 1upx solid #e5e5e5;
		}
		.wdmstitleimg text{
			color: #999;
			font-size: 28upx;
		}
		.wdmstitleimg:after {
			font-family: iconfont;
			position: absolute;
			top: 2px;
			left: 6px;
			content: '\e716';
			font-size: 36upx;
			color: #0077cc;
		}
	.conts{
		text-align: center;
		line-height: 20px;
		padding-top: 10upx;
		box-sizing: border-box;
	}
	.letitle{
		font-size: 32upx;
		color: #333;
		font-weight: bold;
		line-height: 24px;
	}
	.conts image{
		width: 24px;
		height: 20px;
	}
	.conts view{
		line-height:20px;
	}
	.avatarnr{
		padding-left: 10upx;
		box-sizing: border-box;
	}
	.avaxxt text{
		border-radius: 20upx;
		padding: 2upx 10upx;
		box-sizing: border-box;
	}
	.avataruser text{
		color: #111;
		font-size: 26upx;
		font-weight: bold;
	}
	.avaxxt .mas1{
		background: #FFAC45;
		font-size: 20upx;
		color: #fff;
		margin-right: 20upx;
	}
	.avaxxt .mas2{
		background: #FF4443;
		font-size: 20upx;
		color: #fff;
	}
	.ty1 view:nth-child(1){
		font-size: 32upx;
		color: #111;
		line-height: 46upx;
		font-weight: bold;
		text-align:justify;
		text-align-last: left;
	}
	.ty2 view:nth-child(1){
		color: #666;
		font-size: 32upx;
		font-weight: bold;
	}
	.ty2 view:nth-child(2){
		color: #F17503;
		font-size: 32upx;
		font-weight: bold;
	}
	.mrimg{
		width: 180upx;
		height: 180upx;
		border-radius: 5px;
	}
	.simtp{
		font-size: 10px;
		color: #a1a1a1;
		background: #f8f8f8;
		padding: 2px 4px;
		border-radius: 2px;
		margin-right: 10upx;
	}
	.simtp1{
		font-size: 12px;
	}
	.smsmsg{
		width: 94%;
		margin: 0 auto;
		font-size: 20upx!important;
		border-bottom: 1px solid #e5e5e5;
	}
	.smsmsg>view{
		line-height: 80upx;
		color: #999;
	}
	.bclis{
		line-height: 50px;
		margin-top: 24upx;
		padding-left: 4%;
		border-top: 10px solid #e5e5e5;
		box-sizing: border-box;
		font-size: 32upx;
		font-weight: bold;
		color: #777;
	}
	.nums{
		background: #FFB400;
		color: #333;
		width: 45upx;
		height: 45upx;
		text-align: center;
		line-height: 45upx;
		border-radius: 50%;
		position: absolute;
		top: 0upx;
		left: 20upx;
	}
	.lets{
		width: 94%;
		margin: 0upx auto;
		padding-left: 80upx;
		position: relative;
		padding-bottom: 40upx;
		box-sizing: border-box;
	}
	.lets::before{
		content: '';
		width: 2upx;
		height: 100%;
		background: #eee;
		position: absolute;
		left: 43upx;
		top: 0;
	}
	.ysmain .lets:last-of-type::before{
		background: #fff!important;
	}
	.letp{
		text-align: justify;
		text-align-last: left;
		font-size: 28upx;
		color: #666;
		line-height: 40upx;
	}
	.topbox{
		width: 94%;
		margin: 0upx auto;
		margin-top: 20upx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		-webkit-align-content: center;
		align-content: center;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 20upx;
	}
	.kiss{
		width: 94%;
		margin: 0upx auto;
		margin-top: 20upx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		-webkit-align-content: center;
		align-content: center;
	}
	.ty1{
		flex:4;
		padding-right: 20upx;
		box-sizing: border-box;
	}
	.ty2{
		flex:1;
		border-left: 1px solid #e5e5e5;
		padding-left: 10upx;
		box-sizing: border-box;
	}
	.ki1{
		flex:4;
		padding-right: 20upx;
		box-sizing: border-box;
	}
	.ki2{
		flex:1;
		padding-left: 10upx;
		box-sizing: border-box;
	}
	.ki2 view{
		color: #666;
	}
	.avatarg{
		text-align: center;
	}
	.avatarg image{
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
</style>
